<template>
    <nav class="bg-white shadow-md fixed w-full z-50 transition-all duration-300" :class="{ 'bg-white/95 backdrop-blur-sm': scrollPosition > 50 }">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex items-center">
            <div class="flex-shrink-0 flex items-center">
              <i class="fa fa-robot text-2xl text-primary mr-2"></i>
              <span class="text-xl font-bold text-gray-900">AI助手平台</span>
            </div>
            
            <div class="hidden md:ml-8 md:flex md:space-x-8">
              <router-link to="/dashboard" class="border-b-2 border-primary px-1 pt-1 text-sm font-medium text-primary">仪表盘</router-link>
              <router-link to="/models" class="border-transparent hover:border-gray-300 border-b-2 px-1 pt-1 text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors">模型</router-link>
              <router-link to="/projects" class="border-transparent hover:border-gray-300 border-b-2 px-1 pt-1 text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors">项目</router-link>
              <router-link to="/billing" class="border-transparent hover:border-gray-300 border-b-2 px-1 pt-1 text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors">账单</router-link>
              <router-link to="/docs" class="border-transparent hover:border-gray-300 border-b-2 px-1 pt-1 text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors">文档</router-link>
            </div>
          </div>
          
          <div class="flex items-center">
            <div class="flex-shrink-0 relative">
              <button class="p-1 rounded-full text-gray-500 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                <i class="fa fa-bell text-lg"></i>
                <span class="absolute top-0 right-0 block h-2 w-2 rounded-full bg-red-500"></span>
              </button>
            </div>
            
            <div class="ml-4 flex items-center md:ml-6">
              <button type="button" class="flex max-w-xs items-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="user-menu-button">
                <img class="h-8 w-8 rounded-full object-cover" src="https://picsum.photos/200/200?random=1" alt="用户头像">
                <span class="ml-2 text-sm font-medium text-gray-700 md:hidden">张三</span>
                <i class="fa fa-chevron-down ml-1 text-xs text-gray-400"></i>
              </button>
              
              <!-- 下拉菜单 -->
              <div class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1 z-50" id="user-menu">
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人资料</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">账户设置</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">API密钥</a>
                <div class="border-t border-gray-100 my-1"></div>
                <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100" @click.prevent="logout">退出登录</a>
              </div>
            </div>
            
            <!-- 移动端菜单按钮 -->
            <div class="-mr-2 flex items-center md:hidden">
              <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary" id="mobile-menu-button">
                <i class="fa fa-bars text-xl"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 移动端菜单 -->
      <div class="hidden md:hidden" id="mobile-menu">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
          <router-link to="/dashboard" class="bg-primary/10 text-primary block px-3 py-2 rounded-md text-base font-medium">仪表盘</router-link>
          <router-link to="/models" class="hover:bg-gray-100 text-gray-700 block px-3 py-2 rounded-md text-base font-medium">模型</router-link>
          <router-link to="/projects" class="hover:bg-gray-100 text-gray-700 block px-3 py-2 rounded-md text-base font-medium">项目</router-link>
          <router-link to="/billing" class="hover:bg-gray-100 text-gray-700 block px-3 py-2 rounded-md text-base font-medium">账单</router-link>
          <router-link to="/docs" class="hover:bg-gray-100 text-gray-700 block px-3 py-2 rounded-md text-base font-medium">文档</router-link>
        </div>
        <div class="pt-4 pb-3 border-t border-gray-200">
          <div class="flex items-center px-5">
            <div class="flex-shrink-0">
              <img class="h-10 w-10 rounded-full" src="https://picsum.photos/200/200?random=1" alt="用户头像">
            </div>
            <div class="ml-3">
              <div class="text-base font-medium text-gray-800">张三</div>
              <div class="text-sm font-medium text-gray-500">zhangsan@example.com</div>
            </div>
          </div>
          <div class="mt-3 px-2 space-y-1">
            <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">个人资料</a>
            <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">账户设置</a>
            <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-gray-100">API密钥</a>
            <div class="border-t border-gray-100 my-1"></div>
            <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-red-600 hover:bg-gray-100" @click.prevent="logout">退出登录</a>
          </div>
        </div>
      </div>
    </nav>
  </template>
  
  <script>
  import { ref, onMounted, onUnmounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  
  export default {
    name: 'Navbar',
    setup() {
      const router = useRouter()
      const store = useStore()
      const scrollPosition = ref(0)
      
      // 下拉菜单控制
      const userMenuButton = ref(null)
      const userMenu = ref(null)
      const mobileMenuButton = ref(null)
      const mobileMenu = ref(null)
      
      // 处理滚动事件
      const handleScroll = () => {
        scrollPosition.value = window.scrollY
      }
      
      // 切换下拉菜单显示状态
      const toggleUserMenu = () => {
        userMenu.value.classList.toggle('hidden')
      }
      
      // 切换移动菜单显示状态
      const toggleMobileMenu = () => {
        mobileMenu.value.classList.toggle('hidden')
      }
      
      // 关闭所有菜单
      const closeAllMenus = () => {
        userMenu.value.classList.add('hidden')
        mobileMenu.value.classList.add('hidden')
      }
      
      // 退出登录
      const logout = () => {
        store.dispatch('logout').then(() => {
          router.push('/login')
        })
      }
      
      onMounted(() => {
        // 获取DOM元素引用
        userMenuButton.value = document.getElementById('user-menu-button')
        userMenu.value = document.getElementById('user-menu')
        mobileMenuButton.value = document.getElementById('mobile-menu-button')
        mobileMenu.value = document.getElementById('mobile-menu')
        
        // 添加事件监听器
        userMenuButton.value.addEventListener('click', toggleUserMenu)
        mobileMenuButton.value.addEventListener('click', toggleMobileMenu)
        document.addEventListener('click', (event) => {
          if (!userMenuButton.value.contains(event.target) && !userMenu.value.contains(event.target)) {
            userMenu.value.classList.add('hidden')
          }
          
          if (!mobileMenuButton.value.contains(event.target) && !mobileMenu.value.contains(event.target)) {
            mobileMenu.value.classList.add('hidden')
          }
        })
        
        window.addEventListener('scroll', handleScroll)
      })
      
      onUnmounted(() => {
        // 移除事件监听器
        userMenuButton.value.removeEventListener('click', toggleUserMenu)
        mobileMenuButton.value.removeEventListener('click', toggleMobileMenu)
        document.removeEventListener('click', closeAllMenus)
        window.removeEventListener('scroll', handleScroll)
      })
      
      return {
        logout,
        scrollPosition
      }
    }
  }
  </script>
  
  <style scoped>
  /* 自定义样式 */
  .bg-primary {
    background-color: #3B82F6;
  }
  
  .text-primary {
    color: #3B82F6;
  }
  
  .hover\\:bg-primary:hover {
    background-color: #2563EB;
  }
  
  .hover\\:text-primary:hover {
    color: #2563EB;
  }
  
  .focus\\:ring-primary:focus {
    --tw-ring-color: #3B82F6;
  }
  </style>